<template>
    <div id="root">
<Header></Header>
<!--        <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeIn">-->
<!--        <router-view></router-view>-->
<!--        </transition>-->
        <transition :name="animateName">
            <router-view></router-view>
        </transition>
    </div>
</template>

<style>
    @import "../node_modules/animate.css/animate.css";
    .swing-enter-active{
        animation: swing 1s infinite;
    }
    .bounce-enter-active{
        animation: bounce 1s infinite;
    }
    .fadeIn-enter-active{
        animation: fadeIn 1s infinite;
    }
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    ul{
        list-style: none;
    }
    #app,#root{
        width: 100%;
        height: 100%;
    }
</style>
<script>
  import Header from "./views/Header";
  export default {
    components: {Header},
      data:()=>{
        return{
            animateName:"swing"
        }
      },
      watch:{
        '$route'(to,from){
            console.log(to.path)
            console.log(from)
            if(to.path=="/product"){
                this.animateName="fadeIn";
            }else if (to.path=="/mine"){
                this.animateName="bounce";
            }else {
                this.animateName="swing";
            }
        }
      }
  }
</script>